<template>
  <div className="app-container">
    <div className="table-container">
      <base-list
        ref="table"
        url="/vip_redeem_code"
        :options="options"
        :columns="columns"
        :format="format"
        :rules="rules"
        permission="ADMIN"
        @reloadOptions="handleGetOptions"
      >
        <template slot="header_actions" slot-scope="scope">
          <el-button v-waves type="warning" class="filter-button" icon="el-icon-refresh" @click="generate()">批量创建
          </el-button>
        </template>
      </base-list>
    </div>
    <el-drawer
      :visible.sync="generateVisible"
      :destroy-on-close="true"
      :close-on-press-escape="false"
      :wrapper-closable="false"
      direction="rtl"
      :modal="false"
      :size="$store.state.app.device !== 'mobile' ? '60%' : '100%'"
    >
      <el-form ref="generateDataForm" label-width="auto" label-suffix=": " :model="generateData" :rules="rules.add"
               style="margin: 15px;">
        <el-form-item label="数量" prop="size">
          <el-input-number v-model="generateData.size" class="form-item"/>
        </el-form-item>
        <el-form-item label="权益天数" prop="durationDay">
          <el-input-number v-model="generateData.durationDay" class="form-item"/>
        </el-form-item>
        <el-form-item label="权益" prop="role">
          <el-select
            v-model="generateData.role"
            class="form-item"
            clearable
            filterable
          >
            <el-option
              v-for="(item, index_) in options.roleOptions"
              :key="index_"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="有效期开始" prop="startDate">
          <el-date-picker
            v-model="generateData.startDate"
            clearable
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            class="form-item"
          />
        </el-form-item>
        <el-form-item label="有效期结束" prop="endDate">
          <el-date-picker
            v-model="generateData.endDate"
            clearable
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            class="form-item"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-waves
            type="primary"
            :loading="addOrEditLoading"
            @click="handleGenerate()"
          >创建
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {getBaseList, getBaseOptions, requestBase} from '@/api/common'
import BaseList from '@/components/BaseList/index.vue'
import {deepClone} from "@/utils";

export default {
  name: 'VipRedeemCode',
  components: {BaseList},
  data() {
    return {
      columns: [
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'id', label: '兑换码', tooltip: '兑换码', type: 'WORD', queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'role', label: '权益', tooltip: '权益', type: 'DICTIONARY', optionKey: 'roleOptions',queryable: true},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'durationDay', label: '权益天数', tooltip: '权益天数', type: 'NUMBER'},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'startDate', label: '有效期开始', tooltip: '开始时间', type: 'DATE_TIME'},
        {show: true, edit: true, width: 'auto',minWidth: '200', key: 'endDate', label: '有效期结束', tooltip: '结束时间', type: 'DATE_TIME'},
        {show: true, edit: true, width: 'auto',minWidth: '100', key: 'status', label: '状态', tooltip: '状态', type: 'DICTIONARY', optionKey: 'statusOptions', sortable: true, queryable: true},

        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createTime', label: '创建时间', tooltip: '创建时间', type: 'DATE_TIME'},
        {show: true, edit: false, width: 'auto',minWidth: '200', key: 'updateTime', label: '更新时间', tooltip: '更新时间', type: 'DATE_TIME', queryable: true},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'createUser', label: '创建人', tooltip: '创建人', type: 'WORD'},
        {show: false, edit: false, width: 'auto',minWidth: '200', key: 'updateUser', label: '修改人', tooltip: '修改人', type: 'WORD'},
      ],
      format: {},
      rules: {
        add: {
          size: [{required: true, message: '数量必填!', trigger: 'blur'}],
          role: [{required: true, message: '权益必填!', trigger: 'blur'}],
          durationDay: [{required: true, message: '权益天数必填!', trigger: 'blur'}],
          startDate: [{required: true, message: '开始时间必填!', trigger: 'blur'}],
          endDate: [{required: true, message: '结束时间必填!', trigger: 'blur'}],
          status: [{required: true, message: '状态必填!', trigger: 'blur'}],

        },
        edit: {
          id: [{required: true, message: '兑换码必填!', trigger: 'change'}],
          role: [{required: true, message: '权益必填!', trigger: 'blur'}],
          durationDay: [{required: true, message: '权益天数必填!', trigger: 'blur'}],
          startDate: [{required: true, message: '开始时间必填!', trigger: 'blur'}],
          endDate: [{required: true, message: '结束时间必填!', trigger: 'blur'}],
          status: [{required: true, message: '状态必填!', trigger: 'blur'}],
        }
      },
      options: {
        roleOptions: [{id: 'VIP', name: '会员'}],
        statusOptions: [
          {id: 'USED', name: '已使用', type: 'success'},
          {id: 'UNUSED', name: '未使用', type: 'primary'},
        ]
      },
      generateVisible: false,
      generateData: {},
      addOrEditLoading: false,
    }
  },

  created() {
    this.handleGetOptions()
  },
  mounted() {
  },
  methods: {
    handleGetOptions() {
      const options = JSON.parse(localStorage.getItem('allOptions'))
      if (options) {
        this.options = Object.assign(this.options, options)
      }
    },
    generate() {
      this.generateVisible = true
    },
    handleGenerate() {
      this.$refs.generateDataForm.validate((valid) => {
        if (valid) {
          const tempC = deepClone(this.generateData)
          requestBase({url: '/vip_redeem_code/generate', data: tempC, method: 'POST'}).then(res => {
            this.generateData = {}
            this.$refs.table.fetchData()
            this.generateVisible = false
            this.$notify.success('创建成功!')
            this.addOrEditLoading = false
          }).catch(() => {
            this.addOrEditLoading = false
          })
        } else {
          this.addOrEditLoading = false
        }
      })
    }
  }
}
</script>


